<template>
  <div class="app-container">
    <el-col :span="4" @click.native="changeCard(1)" style="margin-right: 10px">
      <div class="card-content">
        <div class="title">制作报价单</div>
        <div class="content">
          简介: 上传报价单，生成报价单数据
        </div>
      </div>
    </el-col>
    <!-- 制作报价单 -->
    <zzbjd v-if="show && cardName === 1" :show="show && cardName === 1" :formInfo="formInfo" @close="close"></zzbjd>
  </div>
</template>

<script>
import zzbjd from '@/views/gd/zzgd/zzbjd.vue'
export default {
  name: 'index',
  components: { zzbjd },
  data(){
    return {
      show: false,
      cardName: 0,
      formInfo: {}
    }
  },
  methods: {
    changeCard(item) {
      // 1. 生成报价单
      this.show = true
      this.cardName = item
    },
    close() {
      this.show = false
      this.cardName = 0
    }
  }
}
</script>

<style scoped>
.card-content {
  width: 100%;
  height: 130px;
  padding: 5px;
  border-radius: 10px;
  background-color: #FFFFFF;
  border: 1px solid grey;
  cursor: pointer;
}
.card-content:hover {
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.title {
  width: 100%;
  height: 20px;
  color: #00afff;
}
.content {
  width: 100%;
  height: 100px;
  font-size: 14px;
  padding-top: 5px;
}
</style>
